<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员信息统计</title>
    <link rel="stylesheet" href="echarts.css">
    <style>
        body{
            background: #f2f4f8;
            color:#000;
        }
        #wrap{
            width:1200px;
            margin:0 auto;
            background-color:#fff;
        }

        .clear::after{
            content:'';
            display: block ;
            clear : both;
        }
        .c-wrap::after{
            content:'';
            display: block ;
            clear : both;
        }
        .c-item{
            float:left;
            width:100%;
            min-height:300px;
            background-color:#fff;
        }
        .c-item.three{
            width:33.3333%;
        }
        .c-item.two{
            width:50%;
        }
        .c-itemin{
            margin:15px;
            border:1px solid #e3e8f0;
        }
        .c-itemtit{
            height: 44px;
            line-height: 44px;
            padding: 0 18px;
            font-size: 17px;
            border-bottom: 1px solid #f5f5f5;
        }
        .chart{
            height:350px;
        }
        .thebtnbox{margin:10px;}
        .thebtn{display:inline-block;width:75px;height:30px;text-align:center;line-height:30px;font-size:14px;border:1px solid #eee;}
        .thebtn:first-child{border-right:0;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
        .thebtn:last-child{border-left:0;border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
        .thebtn.active{background-color:#2096f3;color:#fff;}
        a{text-decoration: none;color:#333;}
    </style>
</head>
<body>
    <div id="wrap">
        <div class="c-wrap">
           <!--  <div class="c-tit">会员情况统计</div> -->
            <div>
                <div class="c-item three">
                    <div class="c-itemin">
                        <div class="c-itemtit">会员年龄分布</div>
                        <div class="chart" id="mageChart">
                        </div>
                    </div>

                </div>
                <div class="c-item three">
                    <div class="c-itemin">
                        <div class="c-itemtit">会员性别分布</div>
                        <div class="chart" id="mgenteChart">
                        </div>
                    </div>
                </div>
                <div class="c-item three">
                    <div class="c-itemin">
                        <div class="c-itemtit">会员渠道来源</div>
                        <div class="chart" id="mchannelChart">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-wrap">
            <!-- <div class="c-tit">新增会员</div> -->
            <div>
                <div class="c-item">
                    <div class="c-itemin">
                        <div class="c-itemtit">新增会员统计</div>
                        <div class="thebtnbox">
                            <a class="thebtn"  href="javascript:;">上一月</a><a href="javascript:;" class=" thebtn active">06月</a><a  class="thebtn " href="javascript:;">下一月</a>
                        </div>
                        <div class="chart" id="newmember">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="c-wrap">
            <!-- <div class="c-tit">销售额</div> -->
            <div>
                <div class="c-item two">
                    <div class="c-itemin">
                        <div class="c-itemtit">销售额同比</div>
                        <div class="chart" id="sale1Chart">
                        </div>
                    </div>

                </div>
                <div class="c-item two">
                    <div class="c-itemin">
                        <div class="c-itemtit">销售额环比</div>
                        <div class="chart" id="sale2Chart">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script>
        var age = {
            data : [3,4,5,6,7,8],
            categories :['3岁','4岁','5岁','6岁','7岁','8岁']
        };
        var gender = {
            data : [
                {value:0, name:'男'},
                {value:1, name:'女'},
            ],
            categories :['男','女']
        };
        var channel = {
            data : [
                {value:335, name:'线上'},
                {value:310, name:'线下'},
                {value:234, name:'转介绍'},
                {value:135, name:'其他'},
            ],
            categories :['线上','线下','转介绍','其他']
        };

        crossbar("mageChart" ,age);
        barChart("sale1Chart" , age );
        barChart("sale2Chart" , age );
        peiChart("mgenteChart" , gender );
        peiChart("mchannelChart" , channel);
        linechart("newmember");
        function  peiChart(obj,data) {
            var mychart = echarts.init(document.getElementById(obj));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: data.categories
                },
                calculable : true,
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        color:['#0f8df2','#0cc3bc','#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                        label: {
                            normal: {
                                show: true,
                                formatter: '{d}%'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data: data.data
                    }
                ]
            };
            mychart.setOption(option);
        };

        function barChart(obj , data){
            var mychart = echarts.init(document.getElementById(obj));
			option = {
			    // title : {
			    //     text: '某地区蒸发量和降水量',
			    //     subtext: '纯属虚构'
			    // },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
                    orient: 'vertical',
                    x: 'right',
			        data:['2016年销售额','2017年销售额']
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
                       
			        }
			    ],
			    series : [
			        {
			            name:'2016年销售额',
			            type:'bar',
                         color:['#c4ccd3'],
			            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
			           
			        },
			        {
			            name:'2017年销售额',
			            type:'bar',
                         color:['#0f8df2'],
			            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
			            markPoint : {
			                data : [
			                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:40}
			                ]
			            }
			        }
			    ]
			};
			                              
            mychart.setOption(option);
        };
        function crossbar(obj) {
            var mychart = echarts.init(document.getElementById(obj));
            option = {
                /*title: {
                    text: '世界人口总量',
                    subtext: '数据来自网络'
                },*/
                bordercolor:'red',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: ['人数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                xAxis: {
                    type: 'category',
                    data: ['0-3','3-5','5-7','7-9','9-11','大于15'],
                    axisLabel : {
                        show:true,
                        interval: 0 ,//,    // {number}
                        formatter: '{value} 岁'
                    }
                },
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        color:['#0cc3bc'],
                        data: [1, 5, 78, 56, 30, 20]
                    }
                ]
            };
            mychart.setOption(option);
        };
        function linechart(obj) {
            var mychart = echarts.init(document.getElementById(obj));
            option = {
                title : {
                    text: '',
                    subtext: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                	x : 'right',
                    data:['新增会员数']
                },
                calculable : true,
                xAxis : [
                    {
                        splitLine:{show: true},
                        type : 'category',
                        boundaryGap : false,
                        data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'新增会员数',
                        type:'line',
                        smooth:true,
                        color: ['#91c7ae'],
                        smooth: 'roundRect',
                        symbolSize : 10,
                        data:[364,361,365,342,339,353,312,284,319,395,296,319]
                    }
                ]
            };



            mychart.setOption(option);
        }
    </script>
</body>
</html>